<template>
  <div class="mainDiv">
    <div>
      <h3>SSH公钥</h3>
      <div class="message">
        使用SSH公钥可以让你在你的电脑和 Gitfree
        通讯的时候使用安全连接（Git的Remote要使用SSH地址）
      </div>
    </div>

    <h4 style="margin-bottom: 20px">
      <span>添加公钥</span>
    </h4>
    <!-- <div><b>标题</b></div>
    <el-input
      v-model="input"
      placeholder="公钥标题(key)"
      style="width: 70%; margin-bottom: 20px"
      size="large"
    /> -->

    <div>
      <b>公钥</b>
    </div>
    <el-input
      v-model="ssh"
      :rows="5"
      type="textarea"
      placeholder="把你的公钥粘贴到这里"
      style="width: 70%"
    />
    <div style="margin-top: 30px">
      <el-button class="button" @click="setssh">保存</el-button>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      ssh: "",
    };
  },
  mounted() {
    this.ssh = window.sessionStorage.getItem("ssh");
  },
  methods: {
    setssh() {
      request
        .get(`users/setssh?ssh=${this.ssh}`)
        .then((res) => {
          console.log(res);
          window.sessionStorage.removeItem("ssh");
          window.sessionStorage.setItem("ssh", this.ssh);
          ElMessage(res.message);
        })
        .catch((err) => {
          console.log(err);
          alert("上传ssh秘钥失败");
        });
    },
  },
};
</script>
<style>
.mainDiv {
  margin-left: 15%;
  margin-top: 6%;
}
.message {
  width: 70%;
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans",
    "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei",
    "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  word-break: break-all;
  box-sizing: inherit;
  position: relative;
  min-height: 1em;
  margin: 1em 0em;
  padding: 1em 1.5em;
  line-height: 1.4285em;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease,
    box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
  font-size: 1em;
  border-radius: 4px;
  border: 1px solid #e3e9ed;
  background: #fff;
  background-color: #f8ffff;
  color: #276f86;
  box-shadow: 0px 0px 0px 1px #a9d5de inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.button {
  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  color: #fff;
  background: #fe7300;
}
</style>
